/**
* 描述：sidebar部分
*/
<style lang="scss" scoped>
  @import 'src/styles/vars';
  @import 'src/styles/mixins';

  .sidebar-nav {
    @include wh(220px, 100%);
    position: fixed;
    transition: all 0.3s;
    color: #FFFFFF;
    background: #FFFFFF;
    z-index: 999;
    user-select: none;
    .sidebar-scroll {
      @include wh(100%, calc(100% - 58px));
      overflow-y: auto;
      background-color: #3a4651;
    }
    &.sidebar-zoom {
      width: 0px;
    }
    .sidebar-title {
      background-color: #3a4651;
      position: relative;
      height: 58px;
      line-height: 58px;
      color: $sidebar_color;
      white-space: nowrap;
      font-size: 16px;
      text-align: center;
    }
  }
  // 动画
  .fade-enter-active{
    transition: all 0.5s ease-in-out;
  }
  .fade-leave-active {
    transition: all 0.3s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0
  }
  .fade-menu-enter-active {
    transition: all 0.5s ease-in-out;
  }
  .fade-menu-leave-active {
    transition: all 0.3s;
  }
  .fade-menu-enter, .fade-menu-leave-to {
    opacity: 0
  }
  .mr5 {
    margin-right: 5px;
  }
</style>
<template>
  <div class="sidebar-nav" :class="classes">
    <div class="sidebar-title">
      <transition name="fade">
          <div v-if="!sidebar_an" style="font-size: 20px;background-color: #3a4651;">
            <span style="font-size: 16px">微职后台管理系统</span>
          </div>
      </transition>
    </div>
    <div class="sidebar-scroll">
      <transition name="fade-menu" mode="out-in">
        <div v-if="!sidebar_an" key="!sidebar_an">
          <el-menu :default-active="isActive"
                   router
                   background-color="#3a4651"
                   text-color="#fff"
                   active-text-color="#ffd04b"
                   :key="index"
                   v-for="(item, index) in menuTree">
            <el-menu-item :index="item.url" v-if="!item.childMenu">
              <hy-icon :type="item.icon" class="mr5"></hy-icon>
              {{item.name}}
            </el-menu-item>
            <el-submenu :index="index + ''" v-else>
              <template slot="title">
                <hy-icon :type="item.icon" class="mr5"></hy-icon>
                {{item.name}}
              </template>
              <el-menu-item :index="itm.url" v-for="(itm, i) in item.childMenu" :key="i">{{itm.name}}</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
  import { mapState, mapMutations } from 'vuex';
  const prefixCls = 'sidebar';

  export default {
    name: 'mgeSidebar',
    data () {
      return {
        sidebar_openeds: [],
        menuTree: [
          {id: 1, icon: 'qiye', name: '企业管理', url: '/mge/main/company'},
          {id: 2, icon: 'yonghu', name: '用户管理', url: '/mge/main/user'},
          {id: 3, icon: 'plus-activity', name: '活动管理', url: '/mge/main/activity'},
          {id: 4, icon: '77', name: '城市管理', url: '/mge/main/city'}
        ]
      };
    },
    computed: {
      ...mapState([
        'sidebar_an'
      ]),
      classes () {
        return {
          [`${prefixCls}-zoom`]: this.sidebar_an
        };
      },
      classStyle () {
        return {
          [`${prefixCls}-icon`]: this.sidebar_an
        };
      },
      isActive: function () {
        return this.$route.path;
      }
    },
    methods: {
      ...mapMutations([
        'SIDEBAR_AN'
      ]),
      zoom () {
        let state = !this.sidebar_an;
        this.SIDEBAR_AN({state: state});
      }
    }
  };
</script>
